{include file="public/header"}
<img src="/static/index/img/top.png" alt="" class="fullimg">
<div class="logo">
    <img src="/static/index/img/logo.png" alt="">
</div>
<div class="rulediv">
    <div class="purplebox">
        <div class="rules">
            <button class="weui-btn obtn huobtn">活动规则</button>
            <h1>{$activity.title}</h1>
            {$activity.content}
            <img src="/static/index/img/ball.png" alt="" class="ruball">
        </div>
    </div>
</div>
<div class="main appbox">
    <div class="count">
        <div class="trape">
            活动倒计时
            <div class="line">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="countnum">
            <div class="line"></div>
            <div class="countdown">
                {php}$time = strtotime($activity->end_time);{/php}
                <span><span id="day">00</span> 天</span>
                <span><span id="hour">00</span> 时</span>
                <span><span id="min">00</span> 分</span>
                <span class="active"><span id="sec">00</span> 秒</span>
            </div>
        </div>
    </div>
    <div class="linkbox">
        <a href="javascript:;" class="weui-btn obtn" id="rules">参与规则</a>
        <a href="javascript:;" class="weui-btn obtn" id="prize">活动奖品</a>
        <a href="{:url('/index/index/rank', ['activity_id' => $activity['id']])}" class="weui-btn obtn">投票榜单</a>
    </div>
    <div class="applyform">
        <h2>报名处</h2>
        <form class="layui-form" action="/apply/add" id="applyForm">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" name="baby_name" type="text" placeholder="宝宝姓名">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" name="age" type="number" placeholder="宝宝年龄">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" name="mobile" type="text" placeholder="手机号">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <input class="weui-input" name="address" type="text" placeholder="所在城市" id="city-picker">
                </div>
            </div>
            <div id="talk_btn" class="weui-btn lbtn luyin"  style="user-select:none"><i class="iconfont icon-luyin"></i>按住录制参赛宣言</div>
            <div class="weixinAudio weui-btn luyend">
                <input type="hidden" name="record" value="" />
                <p class="media"></p>
                <span id="audio_area" class="db audio_area">
                    <span class="audio_wrp db">
                        <span class="audio_play_area">
                            <i class="icon_audio_default"></i>
                            <i class="icon_audio_playing"></i>
                        </span>
                        <span id="audio_length" class="audio_length tips_global"></span>
                        <span class="db audio_info_area">
                            参赛宣言
                        </span>
                        <span class="f-right">
                            <i class="iconfont icon-guanbi1 del-record"></i>
                        </span>
                    </span>
                </span>
            </div>
            <div class="weui-cells__tips">小提示：录音最大时长为60秒。</div>
            <div class="weui-cell weui-flex up">
                <div class="weui-flex__item">
                    <div class="upimg">
                        <i class="iconfont icon-baby"></i>
                        <div>
                            <p>宝宝</p>
                            <p>照片一</p>
                        </div>
                        <input class="loadbtn" data-which="picture" type="file">
                    </div>
                </div>
                <div class="weui-cell__bd weui-flex__item">
                    <div class="upimg">
                        <i class="iconfont icon-baby"></i>
                        <div>
                            <p>宝宝</p>
                            <p>照片二</p>
                        </div>
                        <input class="loadbtn" data-which="picture_two" type="file">
                    </div>
                </div>
            </div>
            <a href="javascript:void(0);" class="weui-btn obtn tijiao">立即报名</a>
        </div>
        </form>
    </div>
    <div class="webintro">
        {foreach name="$activity.sponsor" item="val"}
        <img src="{$val.logo}" alt="">
        <div class="c-purple">
            {$val.content}
        </div>
        {/foreach}
    </div>
    <div class="fot">
        <p>Copiright @2012-2018</p><p>美育儿meiyuer.com 版权所有</p>
    </div>
</div>

<!--<div class="cover">-->
    <!--<img src="/static/index/img/cover.png" alt="" class="fullimg">-->
    <!--<i class="iconfont icon-guanbi closebtn2 coverbtn"></i>-->
<!--</div>-->

<script type="text/javascript">
    var endTime = {$time};
</script>

<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/index/js/layer.js"></script>
<script type="text/javascript" src="/static/index/js/layer/layer.js"></script>
<script type="text/javascript" src="/static/index/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="/static/index/js/city-picker.min.js"></script>
<script type="text/javascript" src="/static/index/js/fastclick.js"></script>
<script type="text/javascript" src="/static/index/js/common.js"></script>
<script type="text/javascript" src="/static/index/js/apply.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="/static/index/js/swiper.min.js"></script>
<script>
    $('.luyend').hide();
    $('.luyin').on();
    $("#city-picker").cityPicker({
        title: "请选择收货地址"
    });

    $('body').on('click', '.weixinAudio .del-record', function() {
        $(this).parents('.weixinAudio').hide().find('input[name="record"]').val('');
        return false;
    })
    $('body').on('click','.weixinAudio',function(){
        var audio = $(this).find('.voiceaudio');
        var player = audio[0];
        if(player == undefined) return false;
        if (player.paused){
            player.play();
        }else {
            player.pause();
        }
    })

    var signPackage = {$signPackage|json_encode};
    var voice = {
        localId: '',
        serverId: ''
    };
    var recordTimer = {};
    var START = 0;
    var END = 0;
    wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: signPackage.timestamp,
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: [
            'startRecord', 'stopRecord', 'uploadVoice', 'onVoicePlayEnd'
        ]
    });
    wx.ready(function () {
        // 页面开始判断是否有录音权限
        if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
            wx.startRecord({
                success: function(){
                    localStorage.rainAllowRecord = 'true';
                    wx.stopRecord();
                },
                cancel: function () {
                    alert('用户拒绝授权录音');
                }
            });
        }
        //按下开始录音
        $('#talk_btn').on('touchstart', function(event){
            event.preventDefault();
            START = new Date().getTime();

            recordTimer = setTimeout(function(){
                wx.startRecord({
                    success: function(){
                        localStorage.rainAllowRecord = 'true';
                    },
                    cancel: function () {
                        alert('用户拒绝授权录音');
                    }
                });
            },500);
        });
        //松手结束录音
        $('#talk_btn').on('touchend', function(event){
            event.preventDefault();
            END = new Date().getTime();

            if((END - START) < 500){
                END = 0;
                START = 0;
                //小于300ms，不录音
                clearTimeout(recordTimer);
            }else{
                wx.stopRecord({
                    success: function (res) {
                        voice.localId = res.localId;
                        uploadVoice();
                    },
                    fail: function (res) {
                        alert(JSON.stringify(res));
                    }
                });
            }
        });

        //上传录音
        function uploadVoice(){
            //调用微信的上传录音接口把本地录音先上传到微信的服务器
            //不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
            wx.uploadVoice({
                localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    //把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。
                    ajaxPost('/File/uploadVoice', {media_id: res.serverId}, function(data) {
                        if (data.code == 1) {
                            $('.weixinAudio').show();
                            $('.weixinAudio .media').html('<audio controls class="voiceaudio"><source src="'+ data.data.path +'" type="audio/mpeg"></audio>');

                            var vedio1 = $('.weixinAudio .media .voiceaudio')
                            var vedio2 = vedio1[0];
                            setTimeout(function (){
                                var leng = parseInt(vedio2.duration);
                                $('#audio_length').text(leng+'s');
                            },1000);
                            $('.weixinAudio input[name="record"]').val(data.data.path);
                        }else if(data.code == 0){
                            layer.msg(data.msg, {
                                icon: 2,
                                time: 2000
                            });
                        }
                    });
                }
            });
        }

        wx.onVoicePlayEnd({
            success: function (res) {
                layer.msg('录音已达到60秒');
                uploadVoice();
            }
        });
    });
</script>
<style type="text/css">
    html {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .db {
        display: block;
    }

    .weixinAudio {
        position: relative;
    }

    .audio_area {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        margin: 10px 1px 0px 0;
        font-size: 0;
        position: relative;
        font-weight: 400;
        text-decoration: none;
        -ms-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
    #audio_length{
        float:left;
        margin-top: 1%;
    }
    .audio_wrp{
        text-align: center;
    }
    .audio_play_area {
        float: left;
        font-size: 0;
        width: 18px;
        height: 25px;
        margin-right: 5%;
    }

    .playing .audio_play_area .icon_audio_default {
        display: block;
    }

    .audio_play_area .icon_audio_default {
        background: transparent url(/static/index/img/iconloop.png) no-repeat 0 0;
        width: 18px;
        height: 25px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 54px 25px;
        background-size: 54px 25px;
        background-position: -36px center;
    }

    .audio_play_area .icon_audio_playing {
        background: transparent url(/static/index/img/iconloop.png) no-repeat 0 0;
        width: 18px;
        height: 25px;
        vertical-align: middle;
        display: inline-block;
        -webkit-background-size: 54px 25px;
        background-size: 54px 25px;
        -webkit-animation: audio_playing 1s infinite;
        background-position: 0px center;
        display: none;
    }

    .audio_area .pic_audio_default {
        display: none;
        width: 18px;
    }
    .audio_area .audio_info_area{
        display: inline-block;
        margin-right: 18%;
        font-size: 18px;
    }
    .playing .audio_play_area .icon_audio_default {
        display: none;
    }

    .playing .audio_play_area .icon_audio_playing {
        display: inline-block;
    }

    @-webkit-keyframes audio_playing {
        30% {
            background-position: 0px center;
        }
        31% {
            background-position: -18px center;
        }
        61% {
            background-position: -18px center;
        }
        61.5% {
            background-position: -36px center;
        }
        100% {
            background-position: -36px center;
        }
    }
</style>
{include file="public/footer"}
